<!--  -->
<template>
  <div class="dashboard">
    <el-row :gutter="20">
      <el-col :span='12'>
        <el-card>
          <div class="title">
            <!-- 多语言切换  固定格式 $t('') -->
            {{ $t('workcalander') }}
          </div>
          <div class="line"></div>
          <workcalendar></workcalendar>
        </el-card>
      </el-col>
      <el-col :span='12'>
        <el-card>其他控件
          <div><el-button @click="changeLang">点我切换语言</el-button></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <div class="advContent">
            <div class="title"> 公告</div>
            <div class="contentItem">
              <ul class="noticeList">
                <li>
                  <div class="item">
                    <img src="@/assets/common/img.jpeg" alt="">
                    <div>
                      <p><span class="col">朱继柳</span> 发布了 第1期“传智大讲堂”互动讨论获奖名单公布</p>
                      <p>2018-07-21 15:21:38</p>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item">
                    <img src="@/assets/common/img.jpeg" alt="">
                    <div>
                      <p><span class="col">朱继柳</span> 发布了 第2期“传智大讲堂”互动讨论获奖名单公布</p>
                      <p>2018-07-21 15:21:38</p>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item">
                    <img src="@/assets/common/img.jpeg" alt="">
                    <div>
                      <p><span class="col">朱继柳</span> 发布了 第3期“传智大讲堂”互动讨论获奖名单公布</p>
                      <p>2018-07-21 15:21:38</p>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>其他控件</el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import workcalendar from './components/workcalendar.vue'
// 导入cookie 为语言持久化做准备
import cookie from 'js-cookie'
export default {
  components: {
    workcalendar
  },
  methods: {
    changeLang () {
      // 得到当前使用的语言
      const lang = this.$i18n.locale
      // 切换语言
      if (lang === 'zh') {
        this.$i18n.locale = 'en'
      } else {
        this.$i18n.locale = 'zh'
      }
      // 将语言持类型持久化保存
      cookie.set('lang', this.$i18n.locale)
      // i18n下语言发生改变，要让组件也有效果需要刷新组件
      this.$router.go(0)
    }
  },
  data () {
    return {

    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.dashboard {
  margin: 20px;

  .title {
    font-size: 24px;
  }

  .line {
    width: 100%;
    height: 1px;
    background-color: #ccc;
    margin-top: 20px;
  }

  .el-row {
    margin-bottom: 20px;
  }

  .header {
    span {
      color: #2c3e50;
      font-size: 24px;
    }

    .item {
      color: #97a8be;
      float: right;
      padding: 3px 0;
    }
  }

  .headTit {
    span {
      border-bottom: 4px solid #8a97f8;
      padding-bottom: 10px;
    }
  }


  img {
    width: 50px;
    height: 50px;
  }
}
</style>